<script setup>
import { ref, shallowRef } from 'vue'
import { useRoute } from 'vue-router'

const Component = shallowRef()

const route = useRoute()
</script>

<template>
  <div>
    <nav class="nav-bar">
      <RouterLink to="/">Go to Home</RouterLink>
      <RouterLink to="/about">Go to About</RouterLink>
      <router-link to="/ComA">Go to ComA</router-link>
      <router-link to="/ComB">Go to ComB</router-link>
      <router-link to="/ComC">Go to ComC</router-link>
    </nav>
    <hr/>
    <router-view v-slot="{ Component }">
        <keep-alive>
          <component :is="Component" />
        </keep-alive>
    </router-view>
  </div>
</template>

<style scoped>
.nav-bar {
  background-color: #333;
  padding: 10px;
  display: flex;
  justify-content: space-around;
}

.nav-bar a {
  color: white;
  text-decoration: none;
  padding: 5px 10px;
  border-radius: 4px;
  transition: background-color 0.3s;
}

.nav-bar a.router-link-active {
  background-color: #57ad8d;
}

.nav-bar a:hover {
  background-color: #57ad8d;
}
</style>